<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue双向绑定原理及实现</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
    #app {
      margin: 20px auto;
      width: 800px;
      padding: 200px;
      text-align: center;
      border: 2px solid #ccc;
    }
  </style>
</head>

<body>
  <div id="app">
    <input class="form-control" v-model="name" type="text">
    <h1>{{ name }}</h1>
  </div>

  <script src="./Mvue/observer.js"></script>
  <script src="./Mvue/watcher.js"></script>
  <script src="./Mvue/compile.js"></script>
  <script src="./Mvue/index.js"></script>
  <script>
    const vm = new Mvue({
      el: "#app",
      data: {
        'name': "我是摩登"
      }
    });
    console.log('my console vm : ', vm);
  </script>
</body>

</html>